/*
// 体验类组件
import {Component} from "react";

class DemoA extends Component{
    constructor(){
        super();//调用父组件的constructor
        
        //定义状态的方法
        this.state={
            couter:1
        }
    }
    add(){
        //更新状态，状态变啦，render方法会重新执行
        this.setState({
            couter:this.state.couter + 1
        })
    }
    // componentDidMout是页面首次渲染完成。
    // componentDidUpdate是页面更新完成。
    componentDidMount(){
        console.log("componentDidMount...");
        this.refs.box.style.color = 'red'
    }
    // 通过this.setState把状态改变了，会重新render，还会调用钩子函数
    componentDidUpdate(){
        console.log("componentDidUpdate");
    }
    render(){
        let {couter} = this.state;
        //在类组件中是有this的
        console.log("render...");
        return(
            <div>
                <h1 ref="box">通过ref可以回去dom元素</h1>
                <h1>类组件--{couter}</h1>
                <button onClick={()=>this.add()}>+1</button>
            </div>
        )
    }
}

export default DemoA;

*/

/*
// 体验函数组件
// 特点：没有this，没有state，没有生命周期，没有上下文，没有ref，用函数式编程
// 优点：性能更好一点
// 从16.8开始，react添加了hook API,这些API配合函数式组件，实现类组件中有的功能
import {useState,useEffect,useRef} from "react";
function DemoB(props){
    let [couter,setCouter] = useState(1);
    let box = useRef(null);
    // console.log(props);
    // 这样写类似于类组件中的componentDidMount和componentDidUpdate
    useEffect(()=>{
        console.log("页面渲染完成、更新完成~");
        box.current.style.color = "blue"
    },[couter]);
    return(
        <div>
            <h1 ref={box}>函数式组件--{couter}</h1>
            <button onClick={()=>setCouter(couter+1)}>+1</button>
        </div>
    )
}

export default DemoB

*/






















